import React from 'react'
import '../../styles/myJump/bg.css'
import { NavBar, Icon } from 'antd-mobile';
import { withRouter } from "react-router-dom";
import axios from 'axios'
import Axios from 'axios';
axios.default.widthCredentials = true

class Backdrop extends React.Component {
    constructor() {
        super()
        this.state = {
            profile: ''
        }
    }

    async  componentDidMount() {
        let token = localStorage.getItem('token')
        await Axios.get('http://localhost:4000/user/detail?uid=' + token)
            .then(res => {
                this.setState({
                    profile: res.data.profile
                })
            })
        // console.log(this.state.profile)
    }

    goback(){
        // console.log(this.props)
        this.props.history.push('/')
    }

    render() {
        let { profile } = this.state
        let bg = { backgroundImage: 'url(' + profile.backgroundUrl + ')' }
        return (
            <div className='drop-back'>
                <div className='drop-wrap' style={bg}></div >
                <div className='my-mation'>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onClick={this.goback.bind(this)}
                        rightContent={[
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    ></NavBar>
                    <div className='my-drop-mat'>
                        <img src={profile.avatarUrl} alt="" />
                        <p className='user-name'>{profile.nickname}</p>
                        <span>关注 {profile.follows}</span>
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(Backdrop)